<template>
  <div class="songSheet">
    <div class="top">
      <p @click="backward">《 返回</p>
      <div class="bgImg">
        <img :src="avatarUrl + '?imageView=1&type=webp&thumbnail=253x0'" />
        <div class="cover"></div>
      </div>
      <div class="topDetail">
        <div class="topLeft">
          <img :src="avatarUrl + '?imageView=1&type=webp&thumbnail=253x0'" />
        </div>
        <div class="topRight">
          <p>{{ name }}</p>
          <div class="description">描述：{{ description }}</div>
          <div class="company">发行公司：{{ company }}</div>
        </div>
      </div>
    </div>
    <p class="title">专辑歌曲</p>
    <ul class="song" v-if="songs.length > 0">
      <li v-for="(s, index) in songs" :key="s.id">
        <SongItem :item="s" @add-list="addMusicList(gedan)">{{ (index + 1) | formatNum }}</SongItem>
      </li>
    </ul>
    <!-- <Loading v-if="isLoading"></Loading>
    <div class="loadingmore" @click="loadMore">加载更多 ></div> -->
  </div>
</template>

<script>
import SongItem from "@/components/SongItem";
// import Loading from "@/components/Loading";
export default {
  data() {
    return {
      listID: null,
      name: null,
      avatarUrl: null,
      company:null,
      page: 1,
      songs: [],
      isLoading: true,
      description: null,
      totalComments:null,
      gedan:[]
    };
  },
 
  methods: {
    // 返回上一页
    backward() {
      this.$router.go(-1);
    },
    // 加载更多
    // loadMore() {
    //   this.page++;
    //   if (this.page >= 10) {
    //     return false;
    //   }
    //   this.isLoading = true;
    //   this.showMusic();
    // },
    showMusic() {
      this.$http
        .get("/album?id=" + this.listID)
        .then((data) => {
          
        //  console.log(data)
          let trackIDS = data.data.songs.slice(
            (this.page - 1) * 10,
            this.page * 10
          );
          this.name = data.data.album.name;
          this.avatarUrl = data.data.album.picUrl;
          this.description = data.data.album.description;
          this.company = data.data.album.company;
          let ids = trackIDS.map((d) => {
            return d.id;
          });
          return ids.join(",");
        })
        .then((ids) => {
          //   获取数据详情
          this.$http
            .get("/song/detail?ids=" + ids)
            .then((songData) => {
               this.gedan=songData.data.songs;
       
              this.isLoading = false;
              songData.data.songs.map((d) => {
                d.song = {
                  artists: d.ar,
                };
                this.songs.push(d);
                return d;
              });
            });
        });
    },
    addMusicList(songs){
      let newArray = [];
      songs.map(d=>{
        let find = false;
        for(let n of newArray){
          if(n.id==d.id){
            find=true;
            break;
          }
        }
        if( !find) newArray.push(d);
      });
      // console.log(this.$root.musicStore.musicList)

      this.$root.musicStore.musicList = newArray;
    },
  },
  components: {
    SongItem,
    // Loading,
  },
  filters: {
    formatNum(val) {
      if (val < 10) {
        return "0" + val;
      }
      if (val >= 10) {
        return val;
      }
    },
  },
  created() {
    this.listID = this.$route.params.id;
    // console.log(this.listID)
    this.showMusic();
  },
};
</script>

<style lang="less">
.songSheet {
  .top {
    width: 100%;
    height: 220px;
    padding: 5px 15px;
    box-sizing: border-box;
    p {
      color: white;
    }
    .bgImg {
      height: 220px;
      width: 100%;
      position: absolute;
      z-index: -1;
      top: 0px;
      left: 0px;
      overflow: hidden;
      img {
        width: 200%;
      }
      .cover {
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3);
        position: absolute;
        top: 0px;
        left: 0px;
      }
    }
    .topDetail {
      margin-top: 15px;
      margin-left: 10px;
      display: flex;
      justify-content: space-around;
      .topLeft {
        flex: 1;
        img {
          width: 100%;
          border-radius: 20px;
          border: 1px solid white;
        }
      }
      .topRight {
        margin-left: 15px;
        flex: 1;
        p {
          color: white;
          font-size: 20px;
          width: 100%;
          word-break: break-all;
        }
        .company {
          color: white;
          margin-top: 10px;
          font-size: 14px;
        }
        .description {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 14px;
          margin-top: 13px;
          color: white;
        }
      }
    }
  }
  .title {
    background-color: #eeeff0;
    padding: 5px 10px;
    font-size: 14px;
  }
  .song {
    li {
      width: 100%;
    }
  }
  // .loadingmore {
  //   line-height: 20px;
  //   color: #7b7b7b;
  //   text-align: center;
  // }
}
</style>